<!--  因为没有加减的组件,所以自己封装组件 -->
<!-- 
  父子传值
  父->子  传商品数量过来和商品对应的索引
  子->父  传改过的商品数量和商品对应的索引

 -->
<template>
    <div class="mycom">
        <ul>
            <li @click="substrict" v-bind="{class:aname==1?'disab':''}">-</li>
            <li>{{aname}}</li>
            <li @click="add">+</li>
        </ul>
    </div>
</template>
<script>
    export default {
        data() {
            return {
                aname: 0,
            }
        },
        props: ['obj'], //为了接受父组件的传值，所以要在props数组中定义一个变量（名称可以有程序员自行拟定）
        // 这里的obj必须和父那边传过来的名字要一样,不然在created上用会出问题
        created() {
            // 父传子过来的aname是一个对象,可以直接拿这个aname在dom生成之前拿出来用
            this.aname = this.obj.bcount;
            // console.log(this.obj);
        },
        methods: {
            // 减
            substrict() {
                // 将一个修改后的数字直接传递到父组件中
                if (this.aname == 1) {
                    return false;
                }
                this.aname--;

                this.send();
            },
            // 加
            add() {
                // 将一个修改后的数字直接传递到父组件中
                this.aname++;
                this.send();
            },
            send() {
                this.$emit('jiajian', {
                    'gindex': this.obj.gindex,
                    'bcount': this.aname,
                    'gid': this.obj.gid
                });
            }

        }
    }
</script>
<style scoped>
    .mycom ul {
        width: 120px;
    }
    
    .disab {
        cursor: no-drop !important;
        border: 1px solid #e88d8d !important;
        color: #e88d8d;
    }
    
    .mycom li {
        cursor: pointer;
        list-style: none;
        display: inline-block;
        width: 30px;
        padding: 2px;
        text-align: center;
        border: 1px solid rgba(0, 0, 0, 0.3);
    }
</style>